/**
 * 发票来源
 */
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Popover, Badge, Radio, Popconfirm, message } from 'antd'
import {deepCopy, isObjectValueEqual, messages} from "share/common"
import errorMessage from 'share/errorMessage';
import InvoiceSourceDetail from './invoice-source-detail'
import TableList from '../table-list'
import settingService from '../request-and-expense-settings.service'
import { batchOperations } from 'components/template/wrapped-table-params/batch-operations'

const RadioGroup = Radio.Group;

class InvoiceSource extends Component {

  state = {
    loading: false,
    btnLoading: {},
    isAll: false,
    selectedRowKeys: [],
    selectedIntervalRowKeys: [],
    searchParams: {}
  };

  infoData = {
    // dataSource: { explain: messages('expense-2.key35')/*您可在此页面设置是否允许员工使用微信导入、支付宝导入、邮箱导入、手录形式归集发票。*/ },
    dataSource: {explain: messages('expense-2.key36')/*您可在此页面设置是否允许员工使用微信导入、支付宝导入、邮箱导入、\"我的发票夹\"小程序导入、手录形式归集发票。*/},
    attributes: [{ title: messages('expense-2.key5')/*说明*/, dataIndex: 'explain', span: 24 }]
  };

  slideFrameInfo = {
    title: messages('expense-2.key1')/*发票来源*/,
    content: InvoiceSourceDetail
  };

  defaultInfo = {
    title: messages('expense-2.key1')/*发票来源*/,
    data: [{
      title: messages('expense-2.key34')/*发票来源设置*/,
      titleStyle: { marginTop: 0 },
      label: messages('expense-2.key20')/*微信导入电子票*/,
      value: messages('expense-2.key18')/*开启*/,
      extra: messages('expense-2.key21')/*配置为“开启”，可在账本和报销单中导入微信卡包中的电子发票*/
    }, {
      label: messages('expense-2.key22')/*支付宝导入发票*/,
      value: messages('expense-2.key18')/*开启*/,
      extra: messages('expense-2.key23')/*配置为“开启”，可在账本和报销单中导入支付宝发票管家中的发票*/
    }, {
      label: messages('expense-2.key24')/*是否导入匹配的支付宝账单记录*/,
      value: messages('common.yes')/*是*/,
      extra: messages('expense-2.key25')/*导入支付宝发票时，系统在支付宝账单中匹配此发票对应的消费记录，若匹配成功，则会将消费记录带入发票关联的费用中；若未匹配成功，则不带入*/
    }, {
      // label: messages('expense-2.key26')/*邮箱导入发票*/,
      value: messages('expense-2.key18')/*开启*/,
      // extra: messages('expense-2.key27')/*配置为“开启”，可在账本和报销单中导入汇联易邮箱中的发票*/,
      // 发票夹设置配置页面文件修改 9125
      label: messages('expense-2.key28')/*发票夹与邮箱导入发票*/,
      extra: messages('expense-2.key29')/*配置为“开启”，可在账本和报销单中导入微信小程序“我的发票夹”中，或导入汇联易邮箱中的发票*/,
    },{
      value: messages('expense-2.key18')/*开启*/,
      label: messages('expense-2.key30')/*扫发票二维码*/,
      extra: messages('expense-2.key31')/*配置为“开启”，可在账本和报销单中扫发票二维码归集发票*/,
    }, {
      label: messages('expense-2.key32')/*手录发票*/,
      value: messages('expense-2.key18')/*开启*/,
      extra: messages('expense-2.key33')/*配置为“开启”，可在账本和报销单中手录发票生成费用，也可在费用详情页手录发票*/
    }]
  };

  searchForm = [{
    id: 'levelCode',
    dataIndex: 'levelCode',
    label: messages('expense-2.key37')/*层级*/,
    component: (
      <RadioGroup>
        <Radio value="COMPANY">{messages('expense-2.key38')/*公司*/}</Radio>
        <Radio value="TENANT">{messages('expense-2.key39')/*租户*/}</Radio>
      </RadioGroup>
    ),
    tagParser: value => {
      return value === "COMPANY" ? messages('expense-2.key38')/*公司*/ : messages('expense-2.key39')/*租户*/;
    }
  }, {
    id: 'companyOIDs',
    dataIndex: 'companyNameList',
    label: messages('expense-2.key40')/*启用公司*/,
    component: 'Chooser',
    props: {
      labelKey: 'name',
      valueKey: 'id',
      type: 'priority_company'
    },
    parser: value => ({
      companyIds: value ? value.map(item => item.id) : null
    })
  }];

  columns = [{
    title: messages('expense-2.key37')/*层级*/,
    dataIndex: 'levelCode',
    width: '10%',
    render: value => value === 'COMPANY' ? messages('expense-2.key38')/*公司*/ : messages('expense-2.key39')/*租户*/
  }, {
    title: messages('expense-2.key41')/*所属组织*/,
    dataIndex: 'levelOrgName',
    render: value => <Popover content={value} placement="topLeft">{value}</Popover>
  }, {
    title: messages('expense-2.key40')/*启用公司*/,
    dataIndex: 'companyNameList',
    render: value => {
      if (value && value.length) {
        let content = value.join('，');
        return <Popover content={content} placement="topLeft">{content}</Popover>
      }
      return messages('expense-2.key42')/*通用*/
    }
  }, {
    title: messages('common.column.status')/*状态*/,
    dataIndex: 'enabled',
    width: '10%',
    render: value => (
      <Badge
        status={value ? 'success' : 'error'}
        text={value ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}
      />
    )
  }, {
    title: messages('common.operation')/*操作*/,
    dataIndex: 'receiptSourceOptId',
    width: '10%',
    render: (value, record) => (
      record.readOnly ? (
        <span onClick={e => e.stopPropagation()} className="font-disabled">{messages('common.delete')/*删除*/}</span>
      ) : (
        <Popconfirm
          title={messages('common.confirm.delete')/*确定要删除吗？*/}
          onConfirm={() => this.handleDelete(value)}
        >
          <a onClick={e => e.stopPropagation()}>{messages('common.delete')/*删除*/}</a>
        </Popconfirm>
      )
    )
  }];

  handleDelete = id => {
    this.setState({ loading: true });
    return settingService.deleteInvoiceSource(id).then(() => {
      this.setState({ loading: false });
      this.advancedTableRef.getList();
      message.success(messages('common.delete.success',{arg1: ''})/*{arg1} 删除成功*/);
    }).catch(e => {
      this.setState({ loading: false });
      errorMessage(e.response);
    })
  };

  service = (page, size, searchParams) => {
    return settingService.getInvoiceSourceList(page, size, searchParams)
  };

  render() {
    const { loading } = this.state;
    let tableParams =  batchOperations({
      rowKey: 'receiptSourceOptId'
    }, [{
      type: 'DELETE',
      modalTitle: messages('expense-2.key43')/*删除发票来源设置*/,
      modalContent: messages('expense-2.key44')/*确认删除发票来源设置*/,
      service: settingService.batchDeleteInvoiceSource,
      onOk: () => this.advancedTableRef.getList()
    }, {
      type: 'ENABLE',
      service: settingService.batchOpenOrCloseInvoiceSource,
      onOk: () => this.advancedTableRef.getList()
    }, {
      type: 'DISABLE',
      service: settingService.batchOpenOrCloseInvoiceSource,
      onOk: () => this.advancedTableRef.getList()
    }], this);
    return (
      <div style={{ height: 'calc(100% - 64px)' }}>
        <TableList
          infoData={this.infoData}
          slideFrameInfo={this.slideFrameInfo}
          defaultInfo={this.defaultInfo}
          afterClose={refresh => typeof refresh === 'boolean' && refresh && this.advancedTableRef.getList()}
          tableParams={{
            tableName: 'invoice-source-setting-table',
            loading,
            rowKey: 'receiptSourceOptId',
            searchForm: this.searchForm,
            columns: this.columns,
            service: this.service,
            onRef: ref => this.advancedTableRef = ref,
            ...tableParams
          }}
        />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return { }
}

export default connect(mapStateToProps)(InvoiceSource)
